import { Graphics } from "@pixi/graphics";
import { Text } from "@pixi/text";
import "@pixi/events"

function onButtonDown(this: Graphics) {
    this.scale.set(0.95); // 点击时缩小按钮
}

function onButtonUp(this: Graphics) {
    this.scale.set(1); // 释放时恢复原大小
}

function onButtonOver(this: Graphics) {
    this.tint = 0xAAAAAA; // 悬停时改变按钮颜色
}

function onButtonOut(this: Graphics) {
    this.tint = 0xFFFFFF; // 移出时恢复按钮颜色
}

export function createButton(text: string, onClick: VoidFunction) {
    // 创建一个圆角矩形按钮
    const button = new Graphics();
    button.beginFill('#1e80ff');
    button.drawRoundedRect(0, 0, 80, 32, 5); // x, y, width, height, radius
    button.endFill();

    button.pivot.set(button.width / 2, button.height / 2);
    button.cursor = "pointer"

    {
        const btnText = new Text(text, {
            fontFamily: 'Arial',
            fontSize: 15,
            fill: 0xffffff
        });
        btnText.anchor.set(0.5, 0.5);
        btnText.x = button.width / 2;
        btnText.y = button.height / 2;
        button.addChild(btnText)
    }

    button.eventMode = "static";
    button.on('pointerdown', onButtonDown)
        .on('pointerup', onButtonUp)
        .on('pointerover', onButtonOver)
        .on('pointerout', onButtonOut)
        .on('pointerup', onClick);

    return button;
}